
import { useState, useEffect } from 'react'
import { UnControlled as CodeMirror } from 'react-codemirror2'
//引入样式
import 'codemirror/lib/codemirror.css'
// import 'codemirror/lib/codemirror.js'

//进行代码格式化
// import prettierBabel from 'prettier/parser-babel'
// import prettier from 'prettier';

// antd
import { Button, Alert } from 'antd';

//引入接口
import { getSetting } from '../../../services/ant-design-pro/api'
import ProCard from '@ant-design/pro-card/lib/ProCard';


const oss_son = () => {
    let [i18n, seti18n] = useState<any>({});
    useEffect(() => {
        getSetting().then(res => {
            console.log(res);
            seti18n(JSON.parse(res.oss));
        })
    }, [])

    return (
        <div>
            {/* oss组件 */}
            <Alert
                message="说明"
                description='请在编辑器中输入您的 oss 配置，并添加 type
                 字段区分{"type":"aliyun","accessKeyId":"","accessKeySecret":"","bucket":"","https":true,"region":""}'
                type="info"
                showIcon
            />
            <ProCard>
                {
                    Object.keys(i18n).map((key: any) => {
                        const code = JSON.stringify(i18n[key], null, 2);
                        return (
                            <CodeMirror
                                value={code}
                                options={{
                                    mode: 'xml',
                                    theme: 'material',
                                    lineNumbers: true,
                                }}
                                onChange={(editor, data, value) => { }}
                            />

                        )
                    })
                }

                <Button key="3" style={{ margin: '20px 0px 0px 33px' }} type="primary">
                    保存
                </Button>
            </ProCard>
        </div>
    )
}
export default oss_son
